<template>
  <div class="table">
    <div class="header">
      <el-checkbox :indeterminate="isIndeterminate"
                   v-model="checkAll"
                   @change="handleCheckAllChange">{{tableName}}</el-checkbox>
      <i class="el-icon-circle-close"
         @click="deleteTable"></i>
    </div>
    <el-checkbox-group v-model="checkedFields"
                       @change="handleCheckedFieldsChange">
      <el-checkbox v-for="(field,index) in fieldsOptions"
                   :label="field"
                   :key="field">
        <span style="display:inline-block;width:1rem">{{field}}</span>
        <el-dropdown :hide-on-click="false"
                     placement="bottom"
                     trigger="click">
          <i class="el-icon-arrow-down el-icon--right"></i>
          <el-dropdown-menu slot="dropdown"
                            @click.stop>
            <el-dropdown-item>
              <label style="display:inline-block;width:0.6rem;">别名：</label>
              <input type="text"
                     placeholder="字段别名"
                     v-model="fieldsDescriptions[index]"
                     @change="changeDescription(index,field)"
                     class="el-input__inner"
                     style="width:1rem;padding:0.1rem;" />
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>
<script>
export default {
  name: 'TableList',
  props: ['data'],
  data () {
    return {
      jsPlumb: null,
      tableName: this.data.name,
      isIndeterminate: true,
      checkedFields: this.data.checkedFields,
      fieldsOptions: this.data.fieldList,
      fieldsDescriptions: this.data.description,
      checkAll: false
    }
  },
  methods: {
    handleCheckAllChange (val) {
      let self = this;
      self.checkedFields = val ? self.fieldsOptions : [];
      self.isIndeterminate = false;
      let fields = self.checkedFields.map(function (item) {
        let index = self.fieldsOptions.indexOf(item);
        return {
          value: item,
          description: self.fieldsDescriptions[index]
        }
      })
      self.$emit('change', self.tableName, fields);
    },
    handleCheckedFieldsChange (value) {
      let self = this
      let checkedCount = value.length;
      self.checkAll = checkedCount === self.fieldsOptions.length;
      self.isIndeterminate = checkedCount > 0 && checkedCount < self.fieldsOptions.length;
      console.log(self.checkedFields)
      let fields = self.checkedFields.map(function (item) {
        let index = self.fieldsOptions.indexOf(item);
        return {
          value: item,
          description: self.fieldsDescriptions[index]
        }
      })
      self.$emit('change', self.tableName, fields);
    },
    deleteTable () {
      this.$emit('deleteTable')
    },
    changeDescription (index, field) {
      let self = this;
      if (self.fieldsDescriptions[index] == '') self.fieldsDescriptions[index] = field;
    }
  }
}
</script>
<style lang="stylus" scoped>
.table
  float left
  width 2rem
  border 0.01rem solid #e6e6e6
  min-height 1rem
  margin-left 1.5rem
  margin-top 0.5rem
  .header
    width 100%
    height 0.3rem
    line-height 0.3rem
    background #e6e6e6
    .el-checkbox
      width 0.5rem
    .el-icon-circle-close
      margin-left 1rem
      cursor pointer
      border-radius 50%
    .el-icon-circle-close:hover
      background #a8a8a8
      color red
  .el-checkbox-group
    .el-checkbox
      width 100%
      text-align left
      padding-left 0.18rem
      padding-top 0.05rem
      padding-bottom 0.05rem
</style>